<template>
    <NavBar title="预约就诊"></NavBar>
    <div class="appoint">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <div class="panel-title">就诊信息</div>
                <div class="panel">
                    <van-field  label="医生姓名">
                        <template #input>{{ doctorInfo.name }}</template>
                    </van-field>
                    <van-field  label="联系方式">
                        <template #input>
                            <a style="color:#333" :href="`tel:${doctorInfo.phone}`">{{ phoneEncrypt(doctorInfo.phone) }}</a>
                        </template>
                    </van-field>
                    <van-field name="date" v-model="formData.date" label="就诊日期" type="date"
                        :rules="[{ required: true, message: '请选择就诊日期' }]" />
                    <van-field name="time" v-model="formData.time" label="就诊时间" type="time"
                        :rules="[{ required: true, message: '请选择就诊时间' }]" />
                </div>
                <van-divider></van-divider>
                <div class="panel-title">患者信息</div>
                <div class="panel">
                    <van-field name="name" v-model="formData.name" label="姓名" placeholder="请输入姓名"
                        :rules="[{ required: true, message: '请输入患者姓名' }]" />
                    <div>
                        <!-- 联系方式: -->
                        <van-field name="phone" v-model="formData.phone" label="联系方式" placeholder="请输入联系方式"
                            :rules="[{ required: true, message: '请输入联系方式' }]" />
                    </div>
                </div>
                <van-button native-type="submit" class="btn-appoint" round plain type="primary" block
                    size="small">立即预约</van-button>
            </van-cell-group>
        </van-form>

    </div>
</template>
<script setup lang="ts">
import { DoctorType, AppointmentType } from '@/types';
import { getDoctorDetail, appointmentAdd } from '@/utils/api';
import { useQuery } from '@/utils/hooks';
import { useRouter } from 'vue-router';
import { onMounted, ref, reactive } from 'vue';
import { phoneEncrypt } from '@/utils/util';
import { showToast } from 'vant';
const { doctorid } = useQuery();
const router = useRouter();
const formData = reactive({
    name: '',
    phone: '',
    date: '',
    time: '',
});
if (!doctorid) {
    router.replace('/');
}
const doctorInfo = ref<DoctorType>({});

onMounted(async () => {
    const { data } = await getDoctorDetail(doctorid);
    doctorInfo.value = data.data
});

type DateTime = { date: string, time: string }
const onSubmit = async (values: AppointmentType & DateTime) => {
    const { name, phone, date, time } = values;
    const appoint_time = date + " " + time;
    const { id: patientid } = JSON.parse(localStorage.getItem('userLoginInfo') || '{}');
    const params = { doctorid, patientid, name, phone, appoint_time };
    const { data: { code, msg } } = await appointmentAdd(params);
    showToast(msg);
    if (code === 200) {
        router.replace('/myAppoint')
    }
}

</script>
<style lang="scss">
.appoint {
    padding: 10px;

    .panel {
        >div {
            margin: 10px;
        }
    }

    .btn-appoint {
        margin-top: 20px;
    }
}
</style>